<!DOCTYPE html> 
<html lang="zh-CN"> 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>青少年服饰销售分析系统 - 营销效果</title> 
    
    <!-- 外部样式表引入 -->
    <link rel="stylesheet" href="theme-dark.css">  <!-- 引入深色主题样式 -->
    
    <!-- JavaScript库引入 -->
    <script src="https://cdn.tailwindcss.com"></script>  <!-- 引入Tailwind CSS框架 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">  <!-- 引入Font Awesome图标库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>  <!-- 引入ECharts图表库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>  <!-- 引入PDF生成库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>  <!-- 引入HTML转Canvas库 -->
    
    <!-- 字体引入 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">  <!-- 引入Google Inter字体 -->
    
    <!-- Tailwind CSS自定义配置 -->
    <script>
        tailwind.config = {  // Tailwind配置对象
            theme: {  // 主题配置
                extend: {  // 扩展默认主题
                    colors: {  // 自定义颜色方案(紫色系)
                        primary: '#B399D4',  // 主色-淡紫色
                        secondary: '#D8BFD8',  // 次要色-蓟色
                        tertiary: '#F0E6FF',  // 第三色-更淡的紫色
                        dark: '#663399',  // 深紫色
                        light: '#FAF5FF',  // 浅色背景
                        darkBg: '#2D1B69',  // 深色背景
                        darkCard: '#1E293B',  // 深色卡片背景
                        accent1: '#9370DB',  // 强调色1-中紫色
                        accent2: '#BA55D3',  // 强调色2-中等兰花紫
                        accent3: '#9932CC',  // 强调色3-深兰花紫
                        accent4: '#8A2BE2',  // 强调色4-蓝紫
                        accent5: '#9400D3',  // 强调色5-深紫罗兰
                        accent6: '#6B7280',  // 中性灰色1
                        accent7: '#9CA3AF',  // 中性灰色2
                        accent8: '#D1D5DB',  // 中性灰色3
                        accent9: '#F3F4F6',  // 中性灰色4
                    },
                    fontFamily: {  // 字体配置
                        inter: ['Inter', 'sans-serif'],  // 主要UI字体
                    },
                }
            }
        }
    </script>
    
    <!-- Tailwind CSS自定义工具类 -->
<style type="text/tailwindcss">
        /* 定义在utilities层级的自定义类 */
        @layer utilities {
            /* 内容自动优化渲染 - 提升性能 */
            .content-auto {
                content-visibility: auto; /* 延迟渲染不可见内容 */
            }
            
            /* 毛玻璃效果 */
            .bg-glass {
                background: rgba(30, 41, 59, 0.85); /* 半透明背景色 */
                backdrop-filter: blur(4px); /* 背景模糊效果 */
                -webkit-backdrop-filter: blur(4px); /* Safari兼容 */
            }
            
            /* 文字阴影效果 */
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微阴影 */
            }
            
            /* 自定义过渡效果 */
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑的缓动函数 */
            }
            
            /* 卡片悬停效果 */
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
            }
            .card-hover:hover {
                transform: translateY(-5px); /* 悬停时上移 */
                box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.2); /* 阴影增强 */
            }
            
            /* 渐变背景类 */
            .gradient-bg {
                background: linear-gradient(135deg, #B399D4 0%, #9370DB 100%); /* 主渐变 */
            }
            .gradient-bg-secondary {
                background: linear-gradient(135deg, #D8BFD8 0%, #F0E6FF 100%); /* 次要渐变 */
            }
            .gradient-accent1 {
                background: linear-gradient(135deg, #9370DB 0%, #B399D4 100%); /* 强调色1渐变 */
            }
            .gradient-accent2 {
                background: linear-gradient(135deg, #BA55D3 0%, #9932CC 100%); /* 强调色2渐变 */
            }
            .gradient-accent3 {
                background: linear-gradient(135deg, #8A2BE2 0%, #9400D3 100%); /* 强调色3渐变 */
            }
            
            /* 动画效果类 */
            .animate-fade-in {
                animation: fadeIn 0.6s ease-in-out; /* 淡入动画 */
            }
            @keyframes fadeIn {
                from { opacity: 0; } /* 开始状态 */
                to { opacity: 1; } /* 结束状态 */
            }
            
            .animate-slide-up {
                animation: slideUp 0.6s ease-out; /* 上滑动画 */
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; } /* 从下方20px开始 */
                to { transform: translateY(0); opacity: 1; } /* 滑动到原位 */
            }
            
            .pulse-animation {
                animation: pulse 2s infinite; /* 脉冲动画(循环) */
            }
            @keyframes pulse {
                0% { transform: scale(1); } /* 原始大小 */
                50% { transform: scale(1.05); } /* 放大5% */
                100% { transform: scale(1); } /* 恢复原始大小 */
            }
            
            /* 数字变化过渡效果 */
            .number-change {
                transition: all 0.5s ease; /* 平滑过渡 */
            }
            
            /* 图表容器样式 */
            .chart-container {
                background: rgba(30, 41, 59, 0.7); /* 半透明深色背景 */
                border-radius: 12px; /* 圆角 */
                padding: 1rem; /* 内边距 */
                transition: all 0.3s ease; /* 过渡效果 */
            }
            .chart-container:hover {
                box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.1); /* 悬停阴影 */
                transform: translateY(-2px); /* 轻微上浮 */
            }
        }
    </style>
    
    <!-- 主样式定义 -->
<style>
        /* 全局页面样式 */
        body {
              overflow-x: hidden; /* 防止水平滚动 */
            font-family: 'Inter', sans-serif; /* 使用Inter字体 */
            background: linear-gradient(135deg, #483f57 0%, #1A0A42 100%); /* 紫色渐变背景 */
            color: #0c0c0c; /* 基础文字颜色 */        
        }
        
        /* 背景画布样式 - 用于粒子效果 */
        #bg-canvas {
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            z-index: 0; /* 置于最底层 */
            pointer-events: none; /* 不响应鼠标事件 */
        }
        
        /* 侧边栏基础样式 */
        .sidebar {
            height: 100vh; /* 视口高度 */
            width: 240px; /* 默认宽度 */
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            z-index: 100; /* 确保在内容上方 */
            overflow-y: auto; /* 垂直滚动 */
            transition: width 0.3s ease; /* 宽度变化动画 */
            background-color: rgba(30, 41, 59, 0.85); /* 半透明深色背景 */
        }
        
        /* 侧边栏折叠状态 */
        .sidebar.collapsed {
            width: 64px; /* 折叠后宽度 */
        }
        
        /* 折叠状态下隐藏侧边栏文本 */
        .sidebar.collapsed .sidebar-text {
            display: none; /* 隐藏文本 */
        }
        
        /* 折叠状态下的菜单项居中 */
        .sidebar.collapsed .sidebar-item {
            justify-content: center; /* 居中显示 */
        }
        
        /* 主内容区样式 */
        .main-content {
            margin-left: 240px; /* 与侧边栏宽度一致 */
            transition: margin-left 0.3s ease; /* 边距变化动画 */
            position: relative;
            z-index: 10; /* 确保在背景上方 */
        }
        
        /* 侧边栏折叠时的主内容区 */
        .main-content.expanded {
            margin-left: 64px; /* 折叠后的边距 */
        }
        
        /* 侧边栏菜单项样式 */
        .sidebar-item {
            display: flex; /* 弹性布局 */
            align-items: center; /* 垂直居中 */
            padding: 12px 16px; /* 内边距 */
            color: #94A3B8; /* 默认文字颜色 */
            transition: all 0.3s ease; /* 过渡效果 */
        }
        
        /* 活动菜单项样式 */
        .sidebar-item.active {
            color: #B399D4; /* 活动项文字颜色 */
            background-color: rgba(179, 153, 212, 0.1); /* 活动项背景 */
        }
        
        /* 菜单项悬停效果 */
        .sidebar-item:hover {
            color: #B399D4; /* 悬停文字颜色 */
            background-color: rgba(179, 153, 212, 0.05); /* 悬停背景 */
        }
        
        /* 侧边栏图标样式 */
        .sidebar-icon {
            width: 24px; /* 图标宽度 */
            height: 24px; /* 图标高度 */
            margin-right: 12px; /* 右边距 */
        }
        
        /* 滚动触发元素初始状态 */
        .scroll-trigger {
            opacity: 0; /* 初始透明 */
            transform: translateY(20px); /* 初始下移20px */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 过渡效果 */
        }
        
        /* 滚动触发元素可见状态 */
        .scroll-trigger.visible {
            opacity: 1; /* 完全不透明 */
            transform: translateY(0); /* 回到原位 */
        }
        
        /* 实时数据指示器样式 */
        .live-indicator {
            display: inline-block;
            width: 8px; /* 宽度 */
            height: 8px; /* 高度 */
            background-color: #36B37E; /* 绿色背景 */
            border-radius: 50%; /* 圆形 */
            margin-right: 5px; /* 右边距 */
            animation: blink 1.5s infinite; /* 闪烁动画 */
        }
        
        /* 闪烁动画关键帧 */
        @keyframes blink {
            0% { opacity: 1; } /* 完全不透明 */
            50% { opacity: 0.3; } /* 半透明 */
            100% { opacity: 1; } /* 恢复不透明 */
        }
        
        /* 表格头部样式 */
        .user-table th {
            background-color: rgba(179, 153, 212, 0.1); /* 表头背景 */
            font-weight: 500; /* 字体粗细 */
        }
        
        /* 表格行悬停效果 */
        .user-table tr:hover {
            background-color: rgba(179, 153, 212, 0.05); /* 悬停背景 */
        }
        
        /* 卡片组件样式 */
        .card {
            background-color: rgba(30, 41, 59, 0.7); /* 半透明背景 */
            color: #E2E8F0; /* 文字颜色 */
        }
        
        /* 深色文字 */
        .text-dark {
            color: #E2E8F0; /* 浅灰色文字 */
        }
        
        /* 中灰色文字 */
        .text-gray-500 {
            color: #94A3B8; /* 中灰色 */
        }
        
        /* 深灰色文字 */
        .text-gray-900 {
            color: #E2E8F0; /* 浅灰色 */
        }
        
        /* 浅灰色背景 */
        .bg-gray-50 {
            background-color: rgba(30, 41, 59, 0.3); /* 浅色半透明背景 */
        }
        
        /* 白色背景(深色模式下) */
        .bg-white {
            background-color: rgba(30, 41, 59, 0.7); /* 半透明深色背景 */
        }
        
        /* 灰色边框 */
        .border-gray-200 {
            border-color: rgba(148, 163, 184, 0.3); /* 半透明边框颜色 */
        }
        
        /* 悬停背景色 */
        .hover:bg-gray-50:hover {
            background-color: rgba(79, 158, 253, 0.05); /* 悬停时的浅蓝色背景 */
        }
    </style>
</head>
<!-- 页面主体 - 使用Inter字体 -->
<body class="font-inter">
    <!-- 主题切换按钮 - 固定在右上角 -->
    <div class="theme-toggle fixed top-4 right-4 z-50">
        <!-- 主题切换按钮样式 -->
        <button id="toggle-theme" class="bg-gray-200 dark:bg-gray-7
            <i class="fa fa-moon-o"></i>
        </button>
    </div>
    
    <!-- 背景粒子效果画布 -->
    <canvas id="bg-canvas"></canvas>
    <!-- 辅助粒子效果画布 -->
    <canvas id="particles" class="canvas-particles"></canvas>
    
    <!-- 主侧边栏导航 -->
    <div class="sidebar shadow-lg" id="sidebar">
        <!-- 侧边栏顶部区域 -->
        <div class="p-4 border-b border-gray-700">
            <div class="flex items-center justify-between">
                <!-- 系统logo和标题 -->
                <div class="flex items-center">
                    <!-- 系统图标 -->
                    <div class="bg-primary text-white p-2 rounded-lg mr-3">
                        <i class="fa fa-line-chart text-xl"></i>
                    </div>
                    <!-- 系统标题 -->
                    <h1 class="text-xl font-bold text-primary sidebar-text">销售分析系统</h1>
                </div>
                <!-- 侧边栏折叠按钮 -->
                <button id="toggle-sidebar" class="text-gray-400 hover:text-primary">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 导航菜单区域 -->
        <div class="py-4">
            <!-- 销售总览菜单项 -->
            <a href="dashboard.html" class="sidebar-item">
                <i class="fa fa-dashboard sidebar-icon"></i>
                <span class="sidebar-text">销售总览</span>
            </a>
            <!-- 客户画像菜单项 -->
            <a href="customer.html" class="sidebar-item">
                <i class="fa fa-users sidebar-icon"></i>
                <span class="sidebar-text">客户画像</span>
            </a>
            <!-- 当前激活的营销效果菜单项 -->
            <a href="marketing.html" class="sidebar-item active">
                <i class="fa fa-bullhorn sidebar-icon"></i>
                <span class="sidebar-text">营销效果</span>
            </a>
            <!-- 季节销售分析菜单项 -->
            <a href="season.html" class="sidebar-item">
                <i class="fa fa-calendar sidebar-icon"></i>
                <span class="sidebar-text">季节销售分析</span>
            </a>
            <!-- 用户管理菜单项 -->
            <a href="user.html" class="sidebar-item">
                <i class="fa fa-user-circle sidebar-icon"></i>
                <span class="sidebar-text">用户管理</span>
            </a>
        </div>
        
        <!-- 侧边栏底部用户信息区域 -->
        <div class="absolute bottom-0 w-full p-4 border-t border-gray-700">
            <div class="flex items-center">
                <!-- 用户头像 -->
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <!-- 用户信息 -->
                <div class="ml-3">
                    <p class="text-sm font-medium text-primary sidebar-text">管理员</p>
                    <p class="text-xs text-gray-400 sidebar-text">admin@example.com</p>
                </div>
                <!-- 登出按钮 -->
                <button id="logout-btn" class="ml-auto text-gray-400 hover:text-red-500">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 主内容区域 - 包含所有营销分析内容 -->
<div class="main-content p-6">
    <!-- 顶部导航栏 -->
    <div class="flex justify-between items-center mb-6">
        <!-- 左侧标题区域 -->
        <div class="flex items-center">
            <!-- 主标题 -->
            <h2 class="text-2xl font-bold text-primary">营销效果</h2>
            <!-- 实时数据指示器 -->
            <div class="ml-3 flex items-center">
                <span class="live-indicator"></span> <!-- 实时数据闪烁点 -->
                <span class="text-sm text-green-500">实时数据</span> <!-- 实时数据标签 -->
            </div>
        </div>
        
        <!-- 右侧操作区域 -->
        <div class="flex items-center space-x-4">
            <!-- 渠道选择下拉框 -->
            <div class="relative">
                <select class="bg-darkCard border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <option>全部渠道</option> <!-- 默认选项 -->
                    <option>社交媒体</option> <!-- 社交媒体渠道 -->
                    <option>搜索引擎</option> <!-- 搜索引擎渠道 -->
                    <option>邮件营销</option> <!-- 邮件营销渠道 -->
                    <option>线下活动</option> <!-- 线下活动渠道 -->
                </select>
            </div>
            
            <!-- 导出报告按钮 -->
            <button id="export-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                <i class="fa fa-download mr-2"></i>导出报告 <!-- 导出图标和文字 -->
            </button>
        </div>
    </div>
    
    <!-- 营销关键指标卡片组 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- 总曝光量卡片 -->
        <div class="card p-6 animate-fade-in card-hover" style="animation-delay: 0.1s">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-gray-400 mb-1">总曝光量</p> <!-- 指标名称 -->
                    <h3 class="text-3xl font-bold text-primary" id="total-impressions">2,458,963</h3> <!-- 指标值 -->
                    <p class="text-sm text-green-500 mt-2"> <!-- 增长百分比 -->
                        <i class="fa fa-arrow-up"></i> 12.8% 较上月
                    </p>
                </div>
            </div>
            <!-- 迷你趋势图容器 -->
            <div class="mt-4 h-12">
                <div id="impressions-trend-mini" style="width: 100%; height: 100%"></div>
            </div>
        </div>
        
        <!-- 点击率卡片 -->
        <div class="card p-6 animate-fade-in card-hover" style="animation-delay: 0.2s">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-gray-400 mb-1">点击率</p> <!-- 指标名称 -->
                    <h3 class="text-3xl font-bold text-accent1" id="click-rate">4.28%</h3> <!-- 指标值 -->
                    <p class="text-sm text-green-500 mt-2"> <!-- 增长百分比 -->
                        <i class="fa fa-arrow-up"></i> 0.5% 较上月
                    </p>
                </div>
                <!-- 点击率图标 -->
                <div class="bg-accent1/10 p-3 rounded-lg">
                    <i class="fa fa-mouse-pointer text-accent1 text-xl"></i>
                </div>
            </div>
            <!-- 迷你趋势图容器 -->
            <div class="mt-4 h-12">
                <div id="click-rate-trend-mini" style="width: 100%; height: 100%"></div>
            </div>
        </div>
            
            <!-- 转化率 -->
            <!-- 转化率卡片 - 淡入动画延迟0.3秒 -->
<div class="card p-6 animate-fade-in card-hover" style="animation-delay: 0.3s">
    <div class="flex justify-between items-start">
        <div>
            <!-- 指标名称 -->
            <p class="text-gray-400 mb-1">转化率</p>
            <!-- 当前转化率数值 -->
            <h3 class="text-3xl font-bold text-accent2" id="conversion-rate">2.15%</h3>
            <!-- 环比变化(负增长) -->
            <p class="text-sm text-red-500 mt-2">
                <i class="fa fa-arrow-down"></i> 0.3% 较上月
            </p>
        </div>
        <!-- 转化率图标装饰 -->
        <div class="bg-accent2/10 p-3 rounded-lg">
            <i class="fa fa-shopping-cart text-accent2 text-xl"></i>
        </div>
    </div>
    <!-- 转化率趋势图容器 -->
    <div class="mt-4 h-12">
        <div id="conversion-rate-trend-mini" style="width: 100%; height: 100%"></div>
    </div>
</div>

<!-- ROI卡片 - 淡入动画延迟0.4秒 -->
<div class="card p-6 animate-fade-in card-hover" style="animation-delay: 0.4s">
    <div class="flex justify-between items-start">
        <div>
            <!-- 指标名称 -->
            <p class="text-gray-400 mb-1">营销ROI</p>
            <!-- 当前ROI数值 -->
            <h3 class="text-3xl font-bold text-accent4" id="marketing-roi">3.24:1</h3>
            <!-- 环比变化(正增长) -->
            <p class="text-sm text-green-500 mt-2">
                <i class="fa fa-arrow-up"></i> 0.4 较上月
            </p>
        </div>
        <!-- ROI图标装饰 -->
        <div class="bg-accent4/10 p-3 rounded-lg">
            <i class="fa fa-line-chart text-accent4 text-xl"></i>
        </div>
    </div>
    <!-- ROI趋势图容器 -->
    <div class="mt-4 h-12">
        <div id="roi-trend-mini" style="width: 100%; height: 100%"></div>
    </div>
</div>
</div> <!-- 结束关键指标卡片组 -->

<!-- 营销渠道分析区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- 渠道流量分布图表 -->
    <div class="chart-container scroll-trigger">
        <!-- 图表标题 -->
        <h3 class="text-lg font-semibold text-primary mb-4">渠道流量分布</h3>
        <!-- 图表容器 -->
        <div id="channel-traffic-chart" style="width: 100%; height: 300px;"></div>
    </div>
    
    <!-- 渠道转化率对比图表 -->
    <div class="chart-container scroll-trigger">
        <!-- 图表标题 -->
        <h3 class="text-lg font-semibold text-primary mb-4">渠道转化率对比</h3>
        <!-- 图表容器 -->
        <div id="channel-conversion-chart" style="width: 100%; height: 300px;"></div>
    </div>
    
    <!-- 渠道ROI对比图表 -->
    <div class="chart-container scroll-trigger">
        <!-- 图表标题 -->
        <h3 class="text-lg font-semibold text-primary mb-4">渠道ROI对比</h3>
        <!-- 图表容器 -->
        <div id="channel-roi-chart" style="width: 100%; height: 300px;"></div>
    </div>
</div>
        
        <!-- 营销活动效果 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 活动流量趋势 -->
            <div class="chart-container scroll-trigger">
                <h3 class="text-lg font-semibold text-primary mb-4">活动流量趋势</h3>
                <div id="campaign-traffic-chart" style="width: 100%; height: 350px;"></div>
            </div>
            
            <!-- 活动转化漏斗 -->
            <div class="chart-container scroll-trigger">
                <h3 class="text-lg font-semibold text-primary mb-4">活动转化漏斗</h3>
                <div id="conversion-funnel-chart" style="width: 100%; height: 350px;"></div>
            </div>
        </div>
        
        <!-- 广告投放效果 -->
        <!-- 广告投放效果卡片 - 滚动触发动画 -->
<div class="card p-6 scroll-trigger">
    <!-- 表格标题区域 -->
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-primary">广告投放效果</h3>
    </div>
    
    <!-- 表格容器 - 支持水平滚动 -->
    <div class="overflow-x-auto">
        <!-- 广告数据表格 -->
        <table class="min-w-full user-table">
            <!-- 表头 -->
            <thead>
                <tr class="bg-darkCard">
                    <!-- 各列标题 -->
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">活动名称</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">渠道</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">开始日期</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">结束日期</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">曝光量</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">点击量</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">点击率</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">转化量</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">转化率</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">花费</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">收入</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ROI</th>
                </tr>
            </thead>
            <!-- 表格内容 - 由JavaScript动态填充 -->
            <tbody class="bg-darkCard divide-y divide-gray-700" id="ads-table">
                <!-- 广告数据由JS动态生成 -->
            </tbody>
        </table>
    </div>
    
    <!-- 分页控件 -->
    <div class="flex justify-between items-center mt-6">
        <!-- 分页信息 -->
        <div class="text-sm text-gray-400">
            显示 1-10 条，共 36 条
        </div>
        <!-- 分页按钮组 -->
        <div class="flex space-x-1">
            <!-- 上一页按钮(禁用状态) -->
            <button class="px-3 py-1 border border-gray-700 rounded hover:bg-primary/10 disabled:opacity-50" disabled>
                <i class="fa fa-angle-left"></i>
            </button>
            <!-- 页码按钮 -->
            <button class="px-3 py-1 border border-gray-700 rounded bg-primary text-white">1</button>
            <button class="px-3 py-1 border border-gray-700 rounded hover:bg-primary/10">2</button>
            <button class="px-3 py-1 border border-gray-700 rounded hover:bg-primary/10">3</button>
            <button class="px-3 py-1 border border-gray-700 rounded hover:bg-primary/10">4</button>
            <!-- 下一页按钮 -->
            <button class="px-3 py-1 border border-gray-700 rounded hover:bg-primary/10">
                <i class="fa fa-angle-right"></i>
            </button>
        </div>
    </div>
</div>
</div>

    <script>
        /**
         * 导出当前页面内容为PDF文件
         * 使用html2canvas捕获DOM内容并转换为图片，再通过jsPDF生成PDF文件
         */
        function exportToPDF() {
            // 从全局获取jsPDF库
            const { jsPDF } = window.jspdf;
            // 创建新的PDF文档 (纵向, 点单位, A4大小)
            const doc = new jsPDF('p', 'pt', 'a4');
            // 获取要导出的DOM元素
            const element = document.querySelector('.main-content');
            // 生成带日期戳的文件名
            const filename = '营销效果报告_' + new Date().toLocaleDateString() + '.pdf';
            
            // html2canvas配置选项
            const options = {
                scale: 2,          // 缩放比例(提高导出质量)
                useCORS: true,     // 允许跨域资源
                logging: false,    // 禁用控制台日志
                scrollY: 0         // 滚动位置归零
            };
            
            // 使用html2canvas捕获DOM内容并转换为canvas
            html2canvas(element, options).then(canvas => {
                // 将canvas转为PNG格式的DataURL
                const imgData = canvas.toDataURL('image/png');
                // 计算图片在PDF中的尺寸(保持宽高比)
                const imgWidth = doc.internal.pageSize.getWidth();
                const imgHeight = canvas.height * imgWidth / canvas.width;
                
                // 将图片添加到PDF文档(从左上角开始)
                doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
                
                // 触发浏览器下载生成的PDF文件
                doc.save(filename);
            }).catch(error => {
                console.error('导出PDF失败:', error);
                alert('导出PDF时发生错误，请重试或联系管理员');
            });
        }
        
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 添加导出按钮事件
            document.getElementById('export-btn').addEventListener('click', exportToPDF);
            const toggleBtn = document.getElementById('toggle-theme');
            
            // 检查本地存储的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.body.classList.add('dark-mode');
                toggleBtn.innerHTML = '<i class="fa fa-sun-o"></i>';
            }

            // 主题切换按钮事件
            toggleBtn.addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                const icon = document.body.classList.contains('dark-mode') ? 'sun-o' : 'moon-o';
                this.innerHTML = `<i class="fa fa-${icon}"></i>`;
                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
            });
        });

        // 动态背景粒子效果
        function createParticles() {
            const canvas = document.getElementById('bg-canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 创建粒子
            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 3 + 1;
                    this.speedX = Math.random() * 2 - 1;
                    this.speedY = Math.random() * 2 - 1;
                    // 修改粒子颜色为紫色系
                    const purpleShades = [
                        'rgba(123, 97, 255, 0.5)', // 主紫色
                        'rgba(156, 131, 255, 0.5)', // 浅紫
                        'rgba(91, 63, 204, 0.5)' // 深紫
                    ];
                    this.color = purpleShades[Math.floor(Math.random() * purpleShades.length)];
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    
                    if (this.size > 0.2) this.size -= 0.001;
                    
                    // 边界检测
                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                }
                
                draw() {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 创建粒子数组
            let particles = [];
            const particleCount = 100;
            
            function init() {
                particles = [];
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle());
                }
            }
            
            // 动画循环
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制连接线
                for (let a = 0; a < particles.length; a++) {
                    for (let b = a; b < particles.length; b++) {
                        const dx = particles[a].x - particles[b].x;
                        const dy = particles[a].y - particles[b].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < 100) {
                            ctx.beginPath();
                            // 修改连接线颜色为紫色系
                            ctx.strokeStyle = `rgba(179, 153, 212, ${0.2 - distance/1000})`;
                            ctx.lineWidth = 0.5;
                            ctx.moveTo(particles[a].x, particles[a].y);
                            ctx.lineTo(particles[b].x, particles[b].y);
                            ctx.stroke();
                        }
                    }
                }
                
                // 更新并绘制粒子
                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                }
                
                requestAnimationFrame(animate);
            }
            
            init();
            animate();
        }
        
        // 侧边栏切换
        function setupSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.querySelector('.main-content');
            const toggleBtn = document.getElementById('toggle-sidebar');
            
                        toggleBtn.addEventListener('click', () => {
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
                
                // 保存侧边栏状态
                localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
            });
            
            // 恢复侧边栏状态
            const sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            if (sidebarCollapsed) {
                sidebar.classList.add('collapsed');
                mainContent.classList.add('expanded');
            }
        }
        
        // 滚动动画
        /**
 * 设置滚动动画效果
 * 当元素进入视口时添加visible类触发动画
 */
function setupScrollAnimation() {
    // 获取所有需要滚动触发的元素
    const scrollElements = document.querySelectorAll('.scroll-trigger');
    
    /**
     * 判断元素是否在视口中
     * @param {HTMLElement} el - 要检查的元素
     * @param {number} dividend - 视口分割比例(默认1表示全屏)
     * @return {boolean} 元素是否在视口中
     */
    const elementInView = (el, dividend = 1) => {
        // 获取元素顶部相对于视口的位置
        const elementTop = el.getBoundingClientRect().top;
        // 判断元素是否进入视口(视口高度/dividend)
        return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
    };
    
    /**
     * 显示滚动元素(添加visible类)
     * @param {HTMLElement} element - 要显示的元素
     */
    const displayScrollElement = (element) => {
        element.classList.add('visible');
    };
    
    /**
     * 隐藏滚动元素(移除visible类)
     * @param {HTMLElement} element - 要隐藏的元素
     */
    const hideScrollElement = (element) => {
        element.classList.remove('visible');
    };
    
    /**
     * 处理滚动动画逻辑
     * 遍历所有滚动元素，根据是否在视口内切换visible类
     */
    const handleScrollAnimation = () => {
        scrollElements.forEach((el) => {
            if (elementInView(el, 1.25)) { // 1.25表示元素进入视口80%时触发
                displayScrollElement(el);
            } else {
                hideScrollElement(el);
            }
        });
    };
    
    // 监听滚动事件
    window.addEventListener('scroll', () => {
        handleScrollAnimation();
    });
    
    // 初始检查(页面加载时执行一次)
    handleScrollAnimation();
}

/**
 * 格式化货币显示
 * @param {number} value - 要格式化的数值
 * @return {string} 格式化后的货币字符串(¥1,234)
 */
function formatCurrency(value) {
    // 添加人民币符号并使用中文数字格式
    return '¥' + value.toLocaleString('zh-CN');
}

/**
 * 生成随机营销数据(用于演示)
 * @return {Object} 包含各类营销数据的对象
 */
function generateRandomMarketingData() {
    // 基础数据(随机生成但保持在合理范围内)
    const totalImpressions = Math.floor(Math.random() * 1000000) + 2000000; // 200万-300万
    const clickRate = (Math.random() * 0.5 + 3.8).toFixed(2); // 3.8%-4.3%
    const conversionRate = (Math.random() * 0.3 + 1.9).toFixed(2); // 1.9%-2.2%
    const marketingROI = (Math.random() * 0.6 + 2.8).toFixed(2); // 2.8-3.4
    
    // 渠道流量分布数据(百分比)
    const channelTrafficData = [
        { name: '社交媒体', value: Math.floor(Math.random() * 10) + 35 }, // 35%-45%
        { name: '搜索引擎', value: Math.floor(Math.random() * 10) + 30 }, // 30%-40%
        { name: '邮件营销', value: Math.floor(Math.random() * 8) + 20 }, // 20%-28%
        { name: '线下活动', value: Math.floor(Math.random() * 5) + 10 }, // 10%-15%
        { name: '其他', value: 5 } // 固定5%
    ];
    
    // 渠道转化率数据
    const channelConversionData = [
        { name: '社交媒体', value: (Math.random() * 0.5 + 2.0).toFixed(2) }, // 2.0%-2.5%
        { name: '搜索引擎', value: (Math.random() * 0.5 + 2.5).toFixed(2) }, // 2.5%-3.0%
        { name: '邮件营销', value: (Math.random() * 0.5 + 3.8).toFixed(2) }, // 3.8%-4.3%
        { name: '线下活动', value: (Math.random() * 0.5 + 3.2).toFixed(2) }, // 3.2%-3.7%
        { name: '其他', value: (Math.random() * 0.5 + 1.5).toFixed(2) } // 1.5%-2.0%
    ];
    
    // 渠道ROI数据
    const channelROIData = [
        { name: '社交媒体', value: (Math.random() * 1.5 + 2.0).toFixed(2) }, // 2.0-3.5
        { name: '搜索引擎', value: (Math.random() * 1.5 + 2.5).toFixed(2) }, // 2.5-4.0
        { name: '邮件营销', value: (Math.random() * 1.5 + 3.5).toFixed(2) }, // 3.5-5.0
        { name: '线下活动', value: (Math.random() * 1.5 + 2.2).toFixed(2) }, // 2.2-3.7
        { name: '其他', value: (Math.random() * 1.5 + 1.8).toFixed(2) } // 1.8-3.3
    ];
            
            // 活动流量趋势
            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            
            const campaignTrafficData = {
                xAxis: months,
                series: [
                    {
                        name: '社交媒体',
                        data: months.map(() => Math.floor(Math.random() * 10000) + 50000)
                    },
                    {
                        name: '搜索引擎',
                        data: months.map(() => Math.floor(Math.random() * 10000) + 60000)
                    },
                    {
                        name: '邮件营销',
                        data: months.map(() => Math.floor(Math.random() * 10000) + 40000)
                    }
                ]
            };
            
            // 转化漏斗
            const conversionFunnelData = [
                { name: '访问', value: 100 },
                { name: '注册', value: Math.floor(Math.random() * 15) + 60 },
                { name: '加购', value: Math.floor(Math.random() * 15) + 40 },
                { name: '下单', value: Math.floor(Math.random() * 10) + 25 },
                { name: '完成', value: Math.floor(Math.random() * 5) + 15 }
            ];
            
            // 广告活动数据
            const adCampaigns = [
                {
                    id: 'CAM-2023001',
                    name: '春季新品推广',
                    channel: '社交媒体',
                    startDate: '2023-03-01',
                    endDate: '2023-03-31',
                    impressions: 325634,
                    clicks: 12856,
                    clickRate: 3.95,
                    conversions: 525,
                    conversionRate: 4.08,
                    cost: 25000,
                    revenue: 125600,
                    roi: 5.02
                },
                {
                    id: 'CAM-2023002',
                    name: '夏季大促',
                    channel: '搜索引擎',
                    startDate: '2023-06-01',
                    endDate: '2023-06-30',
                    impressions: 456876,
                    clicks: 19876,
                    clickRate: 4.35,
                    conversions: 876,
                    conversionRate: 4.41,
                    cost: 38500,
                    revenue: 185600,
                    roi: 4.82
                },
                {
                    id: 'CAM-2023003',
                    name: '返校季特惠',
                    channel: '邮件营销',
                    startDate: '2023-08-01',
                    endDate: '2023-08-31',
                    impressions: 287654,
                    clicks: 12567,
                    clickRate: 4.37,
                    conversions: 567,
                    conversionRate: 4.51,
                    cost: 21500,
                    revenue: 105600,
                    roi: 4.91
                },
                {
                    id: 'CAM-2023004',
                    name: '国庆特别活动',
                    channel: '社交媒体',
                    startDate: '2023-09-25',
                    endDate: '2023-10-07',
                    impressions: 356789,
                    clicks: 15678,
                    clickRate: 4.39,
                    conversions: 678,
                    conversionRate: 4.32,
                    cost: 32500,
                    revenue: 145600,
                    roi: 4.48
                },
                {
                    id: 'CAM-2023005',
                    name: '双十一狂欢',
                    channel: '搜索引擎',
                    startDate: '2023-11-01',
                    endDate: '2023-11-11',
                    impressions: 567890,
                    clicks: 25678,
                    clickRate: 4.52,
                    conversions: 1234,
                    conversionRate: 4.8,
                    cost: 58500,
                    revenue: 325600,
                    roi: 5.57
                },
                {
                    id: 'CAM-2023006',
                    name: '双十二特惠',
                    channel: '邮件营销',
                    startDate: '2023-12-01',
                    endDate: '2023-12-12',
                    impressions: 425678,
                    clicks: 18567,
                    clickRate: 4.36,
                    conversions: 856,
                    conversionRate: 4.61,
                    cost: 42500,
                    revenue: 195600,
                    roi: 4.6
                },
                {
                    id: 'CAM-2023007',
                    name: '新年促销',
                    channel: '线下活动',
                    startDate: '2024-01-01',
                    endDate: '2024-01-15',
                    impressions: 185634,
                    clicks: 8563,
                    clickRate: 4.61,
                    conversions: 385,
                    conversionRate: 4.49,
                    cost: 15000,
                    revenue: 75600,
                    roi: 5.04
                },
                {
                    id: 'CAM-2023008',
                    name: '情人节特别活动',
                    channel: '邮件营销',
                    startDate: '2023-02-01',
                    endDate: '2023-02-14',
                    impressions: 215634,
                    clicks: 9856,
                    clickRate: 4.57,
                    conversions: 425,
                    conversionRate: 4.31,
                    cost: 18500,
                    revenue: 85600,
                    roi: 4.63
                },
                {
                    id: 'CAM-2023009',
                    name: '开学季优惠',
                    channel: '线下活动',
                    startDate: '2023-08-15',
                    endDate: '2023-08-31',
                    impressions: 175632,
                    clicks: 7256,
                    clickRate: 4.13,
                    conversions: 285,
                    conversionRate: 3.93,
                    cost: 28500,
                    revenue: 65800,
                    roi: 2.31
                },
                {
                    id: 'CAM-2023010',
                    name: '会员专享折扣',
                    channel: '邮件营销',
                    startDate: '2023-04-01',
                    endDate: '2023-04-30',
                    impressions: 245632,
                    clicks: 10856,
                    clickRate: 4.42,
                    conversions: 486,
                    conversionRate: 4.48,
                    cost: 21500,
                    revenue: 98500,
                    roi: 4.58
                }
            ];
            
            // 迷你趋势图数据
            const impressionsTrendData = [750000, 800000, 820000, 850000, 880000, 900000, 920000, 950000, 980000, 1000000];
            const clickRateTrendData = [3.8, 3.9, 4.0, 4.1, 4.2, 4.3, 4.25, 4.3, 4.28, 4.28];
            const conversionRateTrendData = [2.3, 2.25, 2.2, 2.18, 2.16, 2.15, 2.14, 2.15, 2.15, 2.15];
            const roiTrendData = [2.8, 2.9, 3.0, 3.1, 3.2, 3.25, 3.24, 3.25, 3.24, 3.24];
            
            return {
                totalImpressions,
                clickRate,
                conversionRate,
                marketingROI,
                channelTrafficData,
                channelConversionData,
                channelROIData,
                campaignTrafficData,
                conversionFunnelData,
                adCampaigns,
                impressionsTrendData,
                clickRateTrendData,
                conversionRateTrendData,
                roiTrendData
            };
        }
        
        // 更新数据卡片
        function updateDataCards(data) {
            // 数字变化动画
            const animateValue = (id, start, end, duration) => {
                let startTimestamp = null;
                const element = document.getElementById(id);
                
                if (element) {
                    const step = (timestamp) => {
                        if (!startTimestamp) startTimestamp = timestamp;
                        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                        
                        if (id === 'total-impressions') {
                            element.innerText = Math.floor(progress * (end - start) + start).toLocaleString('zh-CN');
                        } else if (id === 'click-rate' || id === 'conversion-rate') {
                            element.innerText = (progress * (end - start) + start).toFixed(2) + '%';
                        } else if (id === 'marketing-roi') {
                            element.innerText = (progress * (end - start) + start).toFixed(2) + ':1';
                        }
                        
                        if (progress < 1) {
                            window.requestAnimationFrame(step);
                        }
                    };
                    
                    window.requestAnimationFrame(step);
                }
            };
            
            // 获取当前值
            const currentImpressions = parseInt(document.getElementById('total-impressions').innerText.replace(/,/g, ''));
            const currentClickRate = parseFloat(document.getElementById('click-rate').innerText);
            const currentConversionRate = parseFloat(document.getElementById('conversion-rate').innerText);
            const currentROI = parseFloat(document.getElementById('marketing-roi').innerText);
            
            // 启动动画
            animateValue('total-impressions', currentImpressions, data.totalImpressions, 1000);
            animateValue('click-rate', currentClickRate, parseFloat(data.clickRate), 1000);
            animateValue('conversion-rate', currentConversionRate, parseFloat(data.conversionRate), 1000);
            animateValue('marketing-roi', currentROI, parseFloat(data.marketingROI), 1000);
        }
        
        // 初始化图表
        function initCharts() {
            const data = generateRandomMarketingData();
            
            // 迷你趋势图 - 曝光量
            const impressionsTrendMini = echarts.init(document.getElementById('impressions-trend-mini'));
            impressionsTrendMini.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: data.impressionsTrendData,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(123, 97, 255, 0.5)'},
                                {offset: 1, color: 'rgba(123, 97, 255, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#7B61FF',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图 - 点击率
            const clickRateTrendMini = echarts.init(document.getElementById('click-rate-trend-mini'));
            clickRateTrendMini.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: data.clickRateTrendData,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(79, 158, 253, 0.5)'},
                                {offset: 1, color: 'rgba(79, 158, 253, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#4F9EFD',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图 - 转化率
            const conversionRateTrendMini = echarts.init(document.getElementById('conversion-rate-trend-mini'));
            conversionRateTrendMini.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: data.conversionRateTrendData,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(255, 125, 0, 0.5)'},
                                {offset: 1, color: 'rgba(255, 125, 0, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#FF7D00',
                        width: 2
                    }
                }]
            });
            
            // 迷你趋势图 - ROI
            const roiTrendMini = echarts.init(document.getElementById('roi-trend-mini'));
            roiTrendMini.setOption({
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                series: [{
                    data: data.roiTrendData,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: 'rgba(54, 179, 126, 0.5)'},
                                {offset: 1, color: 'rgba(54, 179, 126, 0.05)'}
                            ]
                        }
                    },
                    lineStyle: {
                        color: '#36B37E',
                        width: 2
                    }
                }]
            });
            
            // 渠道流量分布
            const channelTrafficChart = echarts.init(document.getElementById('channel-traffic-chart'));
            channelTrafficChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}%'
                },
                series: [
                    {
                        name: '渠道流量分布',
                        type: 'pie',
                        radius: ['30%', '75%'],
                        center: ['50%', '50%'],
                        data: data.channelTrafficData.map(item => ({value: item.value, name: item.name})),
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        color: [
                            '#7B61FF', '#4F9EFD', '#FF7D00', '#FF5630', '#36B37E'
                        ]
                    }
                ]
            });
            
            // 渠道转化率对比
            const channelConversionChart = echarts.init(document.getElementById('channel-conversion-chart'));
            channelConversionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.channelConversionData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '转化率(%)',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        name: '转化率',
                        type: 'bar',
                        data: data.channelConversionData.map(item => item.value),
                        color: '#7B61FF',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });
            
            // 渠道ROI对比
            const channelROIChart = echarts.init(document.getElementById('channel-roi-chart'));
            channelROIChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.channelROIData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'ROI(%)',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        name: 'ROI',
                        type: 'bar',
                        data: data.channelROIData.map(item => item.value),
                        color: '#36B37E',
                        barWidth: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });
            
            // 活动流量趋势
            const campaignTrafficChart = echarts.init(document.getElementById('campaign-traffic-chart'));
            campaignTrafficChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['社交媒体', '搜索引擎', '邮件营销'],
                    top: '5%',
                    left: 'center'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.campaignTrafficData.xAxis,
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '流量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(226, 232, 240, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        name: '社交媒体',
                        type: 'line',
                        data: data.campaignTrafficData.series[0].data,
                        color: '#7B61FF',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        data: data.campaignTrafficData.series[1].data,
                        color: '#4F9EFD',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    },
                    {
                        name: '邮件营销',
                        type: 'line',
                        data: data.campaignTrafficData.series[2].data,
                        color: '#FF7D00',
                        label: {
                            show: false,
                            position: 'top',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });
            
            // 转化漏斗
            const conversionFunnelChart = echarts.init(document.getElementById('conversion-funnel-chart'));
            conversionFunnelChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}%'
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: data.conversionFunnelData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#E2E8F0'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        name: '转化率',
                        type: 'bar',
                        data: data.conversionFunnelData.map(item => item.value),
                        color: function(params) {
                            const colors = ['#7B61FF', '#4F9EFD', '#FF7D00', '#FF5630', '#36B37E'];
                            return colors[params.dataIndex];
                        },
                        label: {
                            show: true,
                            position: 'insideRight',
                            color: '#E2E8F0'
                        }
                    }
                ]
            });
            
            // 填充广告表格
            const adsTable = document.getElementById('ads-table');
            adsTable.innerHTML = '';
            
            data.adCampaigns.forEach(campaign => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-primary/5 transition-colors';
                
                // 设置ROI颜色
                let roiColor = 'text-green-500';
                if (campaign.roi < 2) {
                    roiColor = 'text-red-500';
                } else if (campaign.roi < 3) {
                    roiColor = 'text-yellow-500';
                }
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-primary">${campaign.name}</div>
                                <div class="text-xs text-gray-400">${campaign.id}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full ${
                            campaign.channel === '社交媒体' ? 'bg-accent1/20 text-accent1' : 
                            campaign.channel === '搜索引擎' ? 'bg-primary/20 text-primary' : 
                            campaign.channel === '邮件营销' ? 'bg-accent2/20 text-accent2' : 
                            'bg-accent4/20 text-accent4'
                        }">${campaign.channel}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.startDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.endDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.impressions.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.clicks.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${campaign.clickRate > 4 ? 'text-green-500' : 'text-gray-400'}">${campaign.clickRate}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.conversions.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${campaign.conversionRate > 4 ? 'text-green-500' : 'text-gray-400'}">${campaign.conversionRate}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${formatCurrency(campaign.cost)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">${formatCurrency(campaign.revenue)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${roiColor} font-medium">${campaign.roi.toFixed(2)}:1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
                        <!-- 操作按钮已移除 -->
                    </td>
                `;
                
                adsTable.appendChild(row);
            });
            
            // 设置定时更新数据
            let refreshInterval = 5000; // 默认5秒
            let refreshTimer = null;
            
            function startRefreshTimer() {
                if (refreshTimer) clearInterval(refreshTimer);
                if (refreshInterval > 0) {
                    refreshTimer = setInterval(() => {
                        const newData = generateRandomMarketingData();
                        updateDataCards(newData);
                        updateCharts(newData);
                    }, refreshInterval);
                }
            }
            
            // 开始定时刷新
            startRefreshTimer();
        }
        
        // 更新图表数据
        window.updateCharts = function(newData) {
            // 迷你趋势图 - 曝光量
            const impressionsTrendMini = echarts.getInstanceById(document.getElementById('impressions-trend-mini').getAttribute('_echarts_instance_'));
            impressionsTrendMini.setOption({
                series: [{
                    data: newData.impressionsTrendData
                }]
            });
            
            // 迷你趋势图 - 点击率
            const clickRateTrendMini = echarts.getInstanceById(document.getElementById('click-rate-trend-mini').getAttribute('_echarts_instance_'));
            clickRateTrendMini.setOption({
                series: [{
                    data: newData.clickRateTrendData
                }]
            });
            
            // 迷你趋势图 - 转化率
            const conversionRateTrendMini = echarts.getInstanceById(document.getElementById('conversion-rate-trend-mini').getAttribute('_echarts_instance_'));
            conversionRateTrendMini.setOption({
                series: [{
                    data: newData.conversionRateTrendData
                }]
            });
            
            // 迷你趋势图 - ROI
            const roiTrendMini = echarts.getInstanceById(document.getElementById('roi-trend-mini').getAttribute('_echarts_instance_'));
            roiTrendMini.setOption({
                series: [{
                    data: newData.roiTrendData
                }]
            });
            
            // 渠道流量分布
            const channelTrafficChart = echarts.getInstanceById(document.getElementById('channel-traffic-chart').getAttribute('_echarts_instance_'));
            channelTrafficChart.setOption({
                series: [
                    {
                        data: newData.channelTrafficData.map(item => ({value: item.value, name: item.name}))
                    }
                ]
            });
            
            // 渠道转化率对比
            const channelConversionChart = echarts.getInstanceById(document.getElementById('channel-conversion-chart').getAttribute('_echarts_instance_'));
            channelConversionChart.setOption({
                series: [
                    {
                        data: newData.channelConversionData.map(item => item.value)
                    }
                ]
            });
            
            // 渠道ROI对比
            const channelROIChart = echarts.getInstanceById(document.getElementById('channel-roi-chart').getAttribute('_echarts_instance_'));
            channelROIChart.setOption({
                series: [
                    {
                        data: newData.channelROIData.map(item => item.value)
                    }
                ]
            });
            
            // 活动流量趋势
            const campaignTrafficChart = echarts.getInstanceById(document.getElementById('campaign-traffic-chart').getAttribute('_echarts_instance_'));
            campaignTrafficChart.setOption({
                series: [
                    {
                        data: newData.campaignTrafficData.series[0].data
                    },
                    {
                        data: newData.campaignTrafficData.series[1].data
                    },
                    {
                        data: newData.campaignTrafficData.series[2].data
                    }
                ]
            });
            
            // 转化漏斗
            const conversionFunnelChart = echarts.getInstanceById(document.getElementById('conversion-funnel-chart').getAttribute('_echarts_instance_'));
            conversionFunnelChart.setOption({
                series: [
                    {
                        data: newData.conversionFunnelData.map(item => item.value)
                    }
                ]
            });
            
            // 更新广告表格
            const adsTable = document.getElementById('ads-table');
            adsTable.innerHTML = '';
            
            newData.adCampaigns.forEach(campaign => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-primary/5 transition-colors';
                
                // 设置ROI颜色
                let roiColor = 'text-green-500';
                if (campaign.roi < 2) {
                    roiColor = 'text-red-500';
                } else if (campaign.roi < 3) {
                    roiColor = 'text-yellow-500';
                }
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-primary">${campaign.name}</div>
                                <div class="text-xs text-gray-400">${campaign.id}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full ${
                            campaign.channel === '社交媒体' ? 'bg-accent1/20 text-accent1' : 
                            campaign.channel === '搜索引擎' ? 'bg-primary/20 text-primary' : 
                            campaign.channel === '邮件营销' ? 'bg-accent2/20 text-accent2' : 
                            'bg-accent4/20 text-accent4'
                        }">${campaign.channel}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.startDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.endDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.impressions.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.clicks.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${campaign.clickRate > 4 ? 'text-green-500' : 'text-gray-400'}">${campaign.clickRate}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${campaign.conversions.toLocaleString('zh-CN')}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${campaign.conversionRate > 4 ? 'text-green-500' : 'text-gray-400'}">${campaign.conversionRate}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">${formatCurrency(campaign.cost)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">${formatCurrency(campaign.revenue)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm ${roiColor} font-medium">${campaign.roi.toFixed(2)}:1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
                        <!-- 操作按钮已移除 -->
                    </td>
                `;
                
                adsTable.appendChild(row);
            });
        };
        
        // 智能营销活动操作模块已移除

        // 显示通知
        function showNotification(message, type) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });
            
            Toast.fire({
                icon: type,
                title: message
            });
        }

        // 预加载SweetAlert2
        const swalScript = document.createElement('script');
        swalScript.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
        document.head.appendChild(swalScript);

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 操作按钮事件绑定已移除
            createParticles();
            setupSidebar();
            setupScrollAnimation();
            initCharts();
            
            // 初始数据
            const initialData = generateRandomMarketingData();
            updateDataCards(initialData);
            
            // 导出按钮
            document.getElementById('export-btn').addEventListener('click', () => {
                alert('导出成功！');
            });
        });
    </script>
</body>
</html>